<!DOCTYPE html>
<head>
	<style type="text/css">
		body{
			background-image:url(../static/img/bg.jpg);
			background-size: cover;
			background-attachment: fixed;
		}
	</style>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Rectangle Mobile Template</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../static/css/normalize.css">
	<link rel="stylesheet" href="../static/css/font-awesome.css">
	<link rel="stylesheet" href="../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../static/css/templatemo-style.css">
<!--	<link href="../static/css/style1.css" rel="stylesheet">-->
	<script src="../static/js/vendor/modernizr-2.6.2.min.js"></script>
	<script src="../static/js/jquery.js"></script>
	<script src="../static/js/bootstrap.js"></script>
	<script src="../static/js/index.js"></script>
<style type="text/css">
	#imageView_container {
		border: 1px solid #00000034;
		border-radius: 1%;
	}

	@keyframes suo {
		0% {}

		70% {
			width: 15px;
			height: 15px;
			opacity: 1;
		}

		100% {
			width: 35px;
			height: 35px;
			opacity: 0;
		}
	}


	.campusmap {
		position: relative;
		height: 900px;
		width: 900px;
		margin: auto;
		background: transparent no-repeat center;
	}

	.building-F {
		position: absolute;
		right: 243px;
		top: 228px;
	}

	.building-G {
		position: absolute;
		right: 343px;
		top: 328px;
	}


	/* 三重动态光圈 */
	/* 打点 */
	.dotted_red {
		width: 6px;
		height: 6px;
		background-color: rgba(248, 84, 78, 0.7);
		border-radius: 50%;
	}


	.shine1_red {
		animation: suo 1s linear 0s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgb(231, 126, 126);
	}

	.shine2_red {
		animation: suo 1s linear 0.6s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgb(231, 126, 126);

	}

	.shine3_red {
		animation: suo 1s linear 1.2s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgb(231, 126, 126)
	}

	.dotted_blue {
		width: 6px;
		height: 6px;
		background-color: rgba(12, 178, 243, 0.548);
		border-radius: 50%;
	}


	.shine1_blue {
		animation: suo 1s linear 0s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(50, 15, 248, 0.87);
	}

	.shine2_blue {
		animation: suo 1s linear 0.6s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(10, 85, 247, 0.938);
	}

	.shine3_blue {
		animation: suo 1s linear 1.2s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(8, 121, 250, 0.911)
	}

	.dotted_green {
		width: 6px;
		height: 6px;
		background-color: rgba(26, 143, 22, 0.726);
		border-radius: 50%;
	}


	.shine1_green {
		animation: suo 1s linear 0s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(35, 141, 123, 0.87);
	}

	.shine2_green {
		animation: suo 1s linear 0.6s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(7, 145, 122, 0.938);
	}

	.shine3_green {
		animation: suo 1s linear 1.2s infinite;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 15px rgba(8, 114, 31, 0.911);
	}

        .topside{
            background:rgba(0,0,0,0.7);
            height:50px;
            width:100%;
            position:fixed;
            top:0px;
            z-index:100;
        }
        .iconbox{
            width:100px;
            height:60px;
            float:right;
            text-align:center;
            line-height:50px;
            color:#fff;
            font-size:24px;
            position:relative;
            margin-top: -5px;
			z-index: 101;
        }
        .badge{
            padding: 1px 2px;
            border-radius: 50%;
            background: #d00;
            position: absolute;
            top: 14px;
            left: 23px;
            font-size: 3px;
        }
        .subMenu{
            width: 110px;
            position: absolute;
            top: 54px;
            right: -20px;
            line-height: 30px;
            font-size: 16px;
            background:rgba(0,0,0,0.7);
            display: none;
            text-align: left;
            padding-left: 10px;
            border-radius: 10%;
        }
        .subMenu li{
            list-style:none;
            line-height:30px;
            font-size:14px;
        }
        .subMenu li a{
            color:white;
            text-decoration:none;
        }
        .subMenu li i{
            margin-right:10px;
            line-height:30px;
        }
        .mr30{
            margin-right:140px;
        }
        .ic2 a{
            color:white;
        }
        .container{
            margin-top: 50px;
        }
</style>
</head>
<body>

<!--<div class="site-bg"></div>-->
<!--<div class="site-bg-overlay"></div>-->

<!--&lt;!&ndash; TOP HEADER &ndash;&gt;-->
<!--<div class="top-header">-->
<!--	<div class="container">-->
<!--		<div class="row">-->
<!--			<div class="col-md-6 col-sm-6 col-xs-12">-->
<!--			</div>-->
<!--			<div class="col-md-6 col-sm-6 col-xs-12">-->
<!--				<div class="social-icons">-->
<!--					<ul>-->
<!--						<li><a href="{{ url_for('lost') }}" class="fa fa-plus "> Add Lost</a></li>-->
<!--						<li><a href="{{ url_for('found') }}" class="fa fa-plus "> Add Found</a></li>-->
<!--						<li><a href="#" class="fa fa-bell "> Notice</a></li>-->
<!--						<li><a href="{{ url_for('personal_page') }}" class="fa fa-user "> Person</a></li>-->
<!--					</ul>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
<!--	</div>-->
<!--</div> &lt;!&ndash; .top-header &ndash;&gt;-->


<div id="pages" data-lost_pages="{{ lost_pages }}" data-pick_pages="{{ pick_pages }}"></div>


 <div class="topside">
        <div class="iconbox ic1 mr30" id="icon1"><i class="fa fa-user" aria-hidden="true" style="font-size: 15px;"> User</i>
            <div class="subMenu menu1" id="m1" style="padding-top: 10px; padding-bottom: 10px">
                <ul class="sub1" style="padding-left: 5px">
                    <li><A href="{{ url_for('personal_page') }}"><i class="fa fa-credit-card"></i> User</A></li>
                    <li><A href="{{ url_for('log_out') }}"><i class="fa fa-sign-out"></i>Sign Out</A></li>
                </ul>
            </div>
        </div>
        <div class="iconbox ic2"><A href="{{ url_for('personal_page') }}"><i class="fa fa-bell" style="font-size: 15px;"> Notice</i><span
                class="badge pull-right">{{ notice_num }}</span></A></div>

        <div class="iconbox ic1 mr20" id="icon2" ><i class="fa fa-plus" style="font-size: 15px;"> Add</i>
            <div class="subMenu menu2" id="m2" style="padding-top: 10px; padding-bottom: 10px">
                <ul class="sub2" style="padding-left: 5px">
                    <li><A href="{{ url_for('lost') }}"><i class="fa fa-plus"></i>Add Lost</A></li>
                    <li><A href="{{ url_for('found') }}"><i class="fa fa-plus"></i>Add Found</A></li>
                </ul>
            </div>
        </div>

        <div class="iconbox ic2"><A href="{{ url_for('index') }}"><i class="fa fa-home" style="font-size: 15px;">HomePage</i></A></div>
    </div>


<div class="visible-xs visible-sm responsive-menu">
	<a href="#" class="toggle-menu">
		<i class="fa fa-bars"></i> Show Menu
	</a>
	<div class="show-menu">
		<ul class="main-menu">
			<li>
				<a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>Home</a>
			</li>
			<li>
				<a class="show-2 aboutbutton" href="#"><i class="fa fa-map"></i>Hotspot map</a>
			</li>
			<li>
				<a class="show-3 projectbutton" href="#"><i class="fa fa-id-card"></i>Lost Things</a>
			</li>
			<li>
				<a class="show-5 contactbutton" href="#"><i class="fa fa-question"></i>Picked Things</a>
			</li>
		</ul>
	</div>
</div>

<div class="container" id="page-content">
	<div class="row">

		<div class="col-md-9 col-sm-12 content-holder">
			<!-- CONTENT -->
			<div id="menu-container">

				<div class="logo-holder logo-top-margin">
					<a href="#" class="site-brand"><img src="images/logo.png" alt=""></a>
				</div>


				<div id="menu-1" class="homepage home-section text-center">
					<div class="welcome-text">
						<h2>Hello <strong>{{ student.name }}</strong>, Welcome to <strong>Lost & Found</strong></h2>
						<h2>Your Contact Email is <strong>{{ student.emailAddress }}</strong></h2>
						<p> You can report the loss and look for your lost property here. Or return something you found to its owner.</p>
					</div>
				</div>

				<div id="menu-2" class="content about-section">
					<div class="box-content">
						<div class="row">
							<div class="col-md-12 col-sm-6 col-xs-12">
								<div class="project-item">
									<img src="../static/img/map.jpg" alt="">
									{% for lost_thing in all_lost_things %}
										{% for lost_pixelcoor in convert_location_to_xy(lost_thing.location) %}
											{% if lost_thing.status == 1 %}
											<div style="position: absolute; right: {{ int(lost_pixelcoor[0]) }}px; top: {{ int(lost_pixelcoor[1]) }}px;">
												<div class="dotted_red" click></div>
												<div class="shine1_red"></div>
												<div class="shine2_red"></div>
												<div class="shine3_red"></div>
											</div>
											{% elif lost_thing.status == 0 %}
											<div style="position: absolute; right: {{ int(lost_pixelcoor[0]) }}px; top: {{ int(lost_pixelcoor[1]) }}px;">
												<div class="dotted_blue" click></div>
												<div class="shine1_blue"></div>
												<div class="shine2_blue"></div>
												<div class="shine3_blue"></div>
											</div>
											{% endif %}
										{% endfor %}
									{% endfor %}
									{% for pick_thing in all_pick_things %}
										{% for pick_pixelcoor in convert_location_to_xy(pick_thing.location) %}
											{% if pick_thing.status == 1 %}
											<div style="position: absolute; right: {{ int(pick_pixelcoor[0]) }}px; top: {{ int(pick_pixelcoor[1]) }}px;">
												<div class="dotted_red" data-toggle="popover" data-content="It would be my honor if I could help you" click></div>
												<div class="shine1_red"></div>
												<div class="shine2_red"></div>
												<div class="shine3_red"></div>
											</div>
											{% elif pick_thing.status == 0 %}
											<div style="position: absolute; right: {{ int(pick_pixelcoor[0]) }}px; top: {{ int(pick_pixelcoor[1]) }}px;">
												<div class="dotted_blue" click></div>
												<div class="shine1_blue"></div>
												<div class="shine2_blue"></div>
												<div class="shine3_blue"></div>
											</div>
											{% elif pick_thing.status == 2 %}
											<div style="position: absolute; right: {{ int(pick_pixelcoor[0]) }}px; top: {{ int(pick_pixelcoor[1]) }}px;">
												<div class="dotted_green" click></div>
												<div class="shine1_green"></div>
												<div class="shine2_green"></div>
												<div class="shine3_green"></div>
											</div>
											{% endif %}
										{% endfor %}
									{% endfor %}
									<div class="project-hover">
										<h4>Do you wanna add a hotspot?</h4>
									</div>
								</div>
							</div>
						</div>
					</div>
<!--					<div class="row">-->
<!--						<div class="col-md-8 col-sm-8">-->
<!--							<div class="box-content profile">-->
<!--								<h3 class="widget-title">Learn about us</h3>-->
<!--								<div class="profile-thumb">-->
<!--									<img src="images/8.jpg" alt="">-->
<!--								</div>-->
<!--								<div class="profile-content">-->
<!--									<h5 class="profile-name">Linda Beauty</h5>-->
<!--									<span class="profile-role">Creative Director</span>-->
<!--									<p>Most of the images are from <a rel="nofollow" href="#">Unsplash.com</a> website. Curabitur auctor justo pretium purus varius sagittis. Aliquam porttitor leo sapien, hendrerit dapibus lorem.<br><br>-->
<!--									Change icons by <a rel="nofollow" href="#/font-awesome-icon-world-map/">Font Awesome</a> (version 4). Example: <span class="blue">&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt;</span></p>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="col-md-4 col-sm-4">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Background</h3>-->
<!--								<p>Vestibulum pellentesque ante sit amet tristique hendrerit. Sed consequat, nunc lobortis faucibus pretium, enim nibh blandit est, nec sollicitudin est quam a neque. Aenean eget malesuada justo.</p>-->
<!--								<div class="about-social">-->
<!--									<ul>-->
<!--										<li><a href="#" class="fa fa-facebook"></a></li>-->
<!--										<li><a href="#" class="fa fa-twitter"></a></li>-->
<!--										<li><a href="#" class="fa fa-linkedin"></a></li>-->
<!--										<li><a href="#" class="fa fa-dribbble"></a></li>-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--					<div class="row">-->
<!--						<div class="col-md-5 col-sm-5">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Our Studio</h3>-->
<!--								<div class="project-item">-->
<!--									<img src="images/7.jpg" alt="">-->
<!--									<div class="project-hover">-->
<!--										<h4>Great Nature Capture</h4>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="col-md-7 col-sm-7">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Our Technical Skills</h3>-->
<!--								<ul class="progess-bars">-->
<!--									<li>-->
<!--										<span>HTML CSS 80%</span>-->
<!--										<div class="progress">-->
<!--											<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>-->
<!--										</div>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span>PHOTOSHOP 95%</span>-->
<!--										<div class="progress">-->
<!--											<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>-->
<!--										</div>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span>WORDPRESS 70%</span>-->
<!--										<div class="progress">-->
<!--											<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>-->
<!--										</div>-->
<!--									</li>-->
<!--									<li>-->
<!--										<span>PHP mySQL 50%</span>-->
<!--										<div class="progress">-->
<!--											<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>-->
<!--										</div>-->
<!--									</li>-->
<!--								</ul>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
				</div>

				{% for i in range(lost_pages) %}
				<div id="menu-3" class="content gallery-section-{{ i+1 }}">
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="box-content">
								<h3 class="widget-title">All Lost Things</h3>
								<div class="box-content profile">
									<!-- Lost table -->
									<table class="table">
										<thead class="text-center">
											<tr>
												<th>Item Type</th>
												<th>Item Name</th>
												<th>Lost Location</th>
												<th>Contact Email</th>
											</tr>
										</thead>
										<tbody class="text-center">
											{% for lost_thing in all_not_found_lost_things[i*num_per_page:(i+1)*num_per_page] %}
											<tr>
												<td> {{ convert_type(lost_thing.type) }} </td>
												<td> {{ lost_thing.name }} </td>
												<td> {{ convert_location_to_txt(lost_thing.location) }} </td>
												<td> {{ lost_thing.contactEmail }} </td>
											</tr>
											{% endfor %}
										</tbody>
									</table><!-- lost table -->
								</div>
								<div class="project-pages">
									<ul class="page-menu-lost">
										{% for j in range(lost_pages) %}
											<li><a class="page-{{ j+1 }}" href="#">{{ j+1 }}</a></li>
										{% endfor %}
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				{% endfor %}

				{% for i in range(pick_pages) %}
				<div id="menu-4" class="content contact-section-{{ i+1 }}">
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="box-content">
								<h3 class="widget-title">All Found Things</h3>
								<div class="box-content profile">
									<!-- Found table -->
									<table class="table">
										<thead class="text-center">
											<tr>
												<th>Item Type</th>
												<th>Item Name</th>
												<th>Found Location</th>
												<th>Contact Address</th>
											</tr>
										</thead>
										<tbody class="text-center">
											{% for pick_thing in all_not_found_pick_things[i*num_per_page:(i+1)*num_per_page] %}
											<tr>
												<td> {{ convert_type(pick_thing.type) }} </td>
												<td> {{ pick_thing.name }} </td>
												<td> {{ convert_location_to_txt(pick_thing.location) }} </td>
												<td> {{ pick_thing.contactEmail }} </td>
											</tr>
											{% endfor %}
										</tbody>
									</table><!-- lost table -->
								</div>
								<div class="project-pages">
									<ul class="page-menu-found">
										{% for j in range(pick_pages) %}
											<li><a class="page-{{ j+1 }}" href="#">{{ j+1 }}</a></li>
										{% endfor %}
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				{% endfor %}
<!--				<div id="menu-4" class="content contact-section">-->
<!--					<div class="row">-->
<!--						<div class="col-md-12 col-sm-12">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Picked Things</h3>-->
<!--								<div class="box-content profile">-->
<!--									&lt;!&ndash; Lost table &ndash;&gt;-->
<!--									<table class="table">-->
<!--										<thead class="text-center">-->
<!--											<tr>-->
<!--												<th>Item Type</th>-->
<!--												<th>Item Name</th>-->
<!--												<th>Lost Location</th>-->
<!--												<th>Contact Address</th>-->
<!--											</tr>-->
<!--										</thead>-->
<!--										<tbody class="text-center">-->
<!--											{% for pick_thing in all_pick_things %}-->
<!--											<tr>-->
<!--												<td> {{ convert_type(pick_thing.type) }} </td>-->
<!--												<td> {{ pick_thing.name }} </td>-->
<!--												<td> {{ convert_location_to_txt(pick_thing.location) }} </td>-->
<!--												<td> {{ pick_thing.contactEmail }} </td>-->
<!--											</tr>-->
<!--											{% endfor %}-->
<!--										</tbody>-->
<!--									</table>&lt;!&ndash; lost table &ndash;&gt;-->
<!--								</div>-->
<!--								<div class="project-pages">-->
<!--									<ul>-->
<!--										<li><a href="#">1</a></li>-->
<!--										<li><a href="#">2</a></li>-->
<!--										<li><a href="#">3</a></li>-->
<!--										<li><a href="#">...</a></li>-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->

<!--					<div class="row">-->
<!--						<div class="col-md-8 col-sm-8">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Send Us A Message</h3>-->
<!--								<form class="contact-form">-->
<!--									<fieldset>-->
<!--										<input type="text" class="name" id="name" placeholder="Name...">-->
<!--									</fieldset>-->
<!--									<fieldset>-->
<!--										<input type="email" class="email" id="email" placeholder="Email...">-->
<!--									</fieldset>-->
<!--									<fieldset>-->
<!--										<input type="text" class="subject" id="subject" placeholder="Subject...">-->
<!--									</fieldset>-->
<!--									<fieldset>-->
<!--										<textarea name="message" id="message" cols="30" rows="4" placeholder="Message.."></textarea>-->
<!--									</fieldset>-->
<!--									<fieldset>-->
<!--										<input type="submit" class="button" id="button" value="Send Message">-->
<!--									</fieldset>-->
<!--								</form>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="col-md-4 col-sm-4">-->
<!--							<div class="box-content">-->
<!--								<h3 class="widget-title">Stay In Touch</h3>-->
<!--								<p>Sed ullamcorper, risus a tincidunt efficitur, massa mauris ultricies leo, eu interdum eros erat non augue. <br><br>-->
<!--								Suspendisse ornare sollicitudin lectus non egestas. Nam fermentum imperdiet ligula congue venenatis. </p>-->
<!--								<div class="about-social">-->
<!--									<ul>-->
<!--										<li><a href="#" class="fa fa-facebook"></a></li>-->
<!--										<li><a href="#" class="fa fa-twitter"></a></li>-->
<!--										<li><a href="#" class="fa fa-linkedin"></a></li>-->
<!--										<li><a href="#" class="fa fa-dribbble"></a></li>-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->

			</div>
		</div>


		<div class="col-md-3 hidden-sm">

			<nav id="nav" class="main-navigation hidden-xs hidden-sm">
				<ul class="main-menu">
					<li>
						<a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>Home</a>
					</li>
					<li>
						<a class="show-2 aboutbutton" href="#"><i class="fa fa-map"></i>Hotspot map</a>
					</li>
					<li>
						<a class="show-3 projectbutton" href="#"><i class="fa fa-id-card"></i>Lost Things</a>
					</li>
					<li>
						<a class="show-5 contactbutton" href="#"><i class="fa fa-question"></i>Picked Things</a>
					</li>
				</ul>
			</nav>

		</div>
	</div>
</div>

<!-- SITE-FOOTER -->
<div class="site-footer">
	<div class="container">
		<div class="row">
			<div class="col-md-12 text-center">
				<p class="phone-info">Call us: Lost&Found@tongji.edu.cn </p>
			</div>
		</div>
	</div>
</div> <!-- .site-footer -->

<script>
	$(document).ready(function () {
		$(".w100").css("width", "100%");
		$(".aside").css("left", "-230px");
		$(".keybtn").find('.fa').attr('class', "fa fa-chevron-right");

		var onoff = true;
		$(".keybtn").click(function () {
			if (onoff) {
				onoff = !onoff
				$(".aside").animate({ left: '0px' });
				$(this).find('.fa').attr('class', "fa fa-chevron-left");
				$(".w100").css("width", "calc(100vw - 230px)");
			} else {
				onoff = !onoff
				$(".aside").animate({ left: '-230px' });
				$(this).find('.fa').attr('class', "fa fa-chevron-right");
				$(".w100").css("width", "100vw");
			}
		});
		/*$(".ic1").hover(function () {
			$(this).find(".subMenu").css("display", "block");
		}, function () {
			$(this).find(".subMenu").css("display", "none");
		});*/
	});
</script>
<script type="text/javascript">
	$(function () {
	  $('[data-toggle="popover"]').popover()
	})
        window.onload=function(){
            function $(id){
              return document.getElementById(id);
            }
            $("icon1").onmouseover=function(){
              // this.style.display="none";
              $("m1").style.display="block"
            }
            $("icon1").onmouseout=function(){
              $("m1").style.display="none"
            }
            $("icon2").onmouseover=function(){
              // this.style.display="none";
              $("m2").style.display="block"
            }
            $("icon2").onmouseout=function(){
              $("m2").style.display="none"
            }
        }
</script>
<script src="../static/js/vendor/jquery-1.10.2.min.js"></script>
<script src="../static/js/plugins.js"></script>
<script src="../static/js/main.js"></script>
<!-- templatemo 439 rectangle -->
</body>
</html>